<template>
  <div class="newempower">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          授权
          <div class="close" @click="cancel()"></div>
        </div>
        <div style="margin-left:2rem;">
          <el-tag
            v-for="(tag,index) in empowerDataList"
            :key="index"
            closable
            style="margin-bottom: 0.1rem;"
            :type="tag.isCheck ?'':'info'"
            :effect="tag.isCheck ?'plain':'dark'"
            :disable-transitions="false"
            @close="handleClose(tag)"
            @click="clickTag(tag)"
          >{{tag.hardwareName}}</el-tag>
          <el-button class="button-new-tag" style="margin-bottom: 0.1rem;" @click="showInput">+新增</el-button>
        </div>
        <el-form label-width="240px">
          <el-form-item label="是否授权">
            <el-switch v-model="isEmpower"></el-switch>
          </el-form-item>
        </el-form>
        <div v-if="isEmpower">
          <el-form label-width="240px">
            <el-form-item label="授权时间" :rules="[
      { required: true, message: ''}]">
              <el-row style="width:64%">
                <el-col :span="10">
                  <el-date-picker
                    ref="authBeginTime"
                    type="date"
                    placeholder="开始日期"
                    v-model="currentTag.authBeginTime"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-col>
                <el-col style="text-align: center;" :span="3">-</el-col>
                <el-col :span="11">
                  <el-date-picker
                    ref="authEndTime"
                    type="date"
                    placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    v-model="currentTag.authEndTime"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-col>
              </el-row>
            </el-form-item>
            <!-- <el-form-item label="产品ID" :rules="[
      { required: true, message: ''}]">
              <el-input
                style="width:50%"
                clearable
                v-model="empowerData.productId"
                placeholder="请输入产品ID"
              ></el-input>
            </el-form-item>-->
            <el-form-item label="硬件ID" :rules="[
      { required: true, message: ''}]">
              <el-input
                ref="hardwareId"
                style="width:64%"
                clearable
                v-model="currentTag.hardwareId"
                placeholder="请输入硬件ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="佳词妙记" style="margin-bottom: 0rem;">
              <el-checkbox-group v-model="goodMemory">
                <el-checkbox label="1">等级1</el-checkbox>
                <el-checkbox label="2">等级2</el-checkbox>
                <el-checkbox label="3">等级3</el-checkbox>
                <el-checkbox label="4">等级4</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="数独冲关" style="margin-bottom: 0rem;">
              <el-checkbox-group v-model="sudokuPass">
                <el-checkbox label="1">等级1</el-checkbox>
                <el-checkbox label="2">等级2</el-checkbox>
                <el-checkbox label="3">等级3</el-checkbox>
                <el-checkbox label="4">等级4</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="巧思阅读" style="margin-bottom: 0rem;">
              <el-checkbox-group v-model="skillfulRead">
                <el-checkbox label="1">等级1</el-checkbox>
                <el-checkbox label="2">等级2</el-checkbox>
                <el-checkbox label="3">等级3</el-checkbox>
                <el-checkbox label="4">等级4</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="妙语连珠" style="margin-bottom: 0rem;">
              <el-checkbox-group v-model="sparklingDiscourse">
                <el-checkbox label="1">等级1</el-checkbox>
                <el-checkbox label="2">等级2</el-checkbox>
                <el-checkbox label="3">等级3</el-checkbox>
                <el-checkbox label="4">等级4</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn_div">
          <div class="btn_sure" @click="sure()">确定授权</div>
          <div class="btn_cancel" @click="cancel()">取 消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm, user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: false,
      isEmpower: true,
      nameIndex: 1,
      currentTag: {},
      empowerDataList: [
        {
          isCheck: true,
          authBeginTime: "",
          authEndTime: "",
          hardwareId: "",
          sysUserId: "",
          wordsAuth: "",
          readingAuth: "",
          extraReadingAuth: "",
          exerciseAuth: "",
          isStatus: ""
        }
      ],
      authBeginTime: "",
      authEndTime: "",
      sysUserId: "",
      hardwareId: "",
      goodMemory: [], //佳词妙记
      sudokuPass: [], //数独冲关
      skillfulRead: [], //巧思阅读
      sparklingDiscourse: [] //妙语连珠
    };
  },
  methods: {
    showInput() {
      if (vm.addTag()) {
        for (let i = 0; i < vm.empowerDataList.length; i++) {
          vm.empowerDataList[i].isCheck = false;
        }
        let paras = {
          hardwareName: "设备" + vm.nameIndex++,
          isCheck: true,
          authBeginTime: vm.authBeginTime,
          authEndTime: vm.authEndTime,
          hardwareId: "",
          sysUserId: vm.sysUserId,
          wordsAuth: "",
          readingAuth: "",
          extraReadingAuth: "",
          exerciseAuth: "",
          isStatus: "1"
        };
        vm.empowerDataList.push(paras);
        vm.showTag(paras);
      }
    },
    clickTag(item) {
      if (!vm.addTag()) {
        return;
      }
      for (let i = 0; i < vm.empowerDataList.length; i++) {
        vm.empowerDataList[i].isCheck = false;
      }
      vm.showTag(item);
    },
    handleClose(item) {
      this.empowerDataList.splice(this.empowerDataList.indexOf(item), 1);
      if (this.empowerDataList.length == 0) {
        vm.nameIndex = 1;
        let paras = {
          hardwareName: "设备" + vm.nameIndex++,
          isCheck: true,
          authBeginTime: vm.authBeginTime,
          authEndTime: vm.authEndTime,
          hardwareId: "",
          sysUserId: vm.sysUserId,
          wordsAuth: "",
          readingAuth: "",
          extraReadingAuth: "",
          exerciseAuth: "",
          isStatus: "1"
        };
        vm.empowerDataList.push(paras);
      }
      vm.showTag(this.empowerDataList[0]);
    },
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 50);
      vm.authBeginTime = data.empowerStartTime;
      vm.authEndTime = data.empowerEndTime;
      vm.sysUserId = data.sysUserId;
      if (data.isAdd) {
        vm.isAdd = true;
        vm.isEmpower = true;
        vm.empowerDataList[0].authBeginTime = data.empowerStartTime;
        vm.empowerDataList[0].authEndTime = data.empowerEndTime;
        vm.empowerDataList[0].sysUserId = data.sysUserId;
        vm.empowerDataList[0].hardwareName = "设备" + vm.nameIndex++;
        vm.currentTag = vm.empowerDataList[0];
      } else {
        vm.isAdd = false;
        vm.nameIndex = data.empowerDataList.length + 1;
        vm.empowerDataList = data.empowerDataList;
        vm.showTag(vm.empowerDataList[0]);
      }
    },
    showTag(data) {
      data.isCheck = true;
      vm.isEmpower = data.isStatus == "1";
      vm.goodMemory = []; //佳词妙记
      vm.sudokuPass = []; //数独冲关
      vm.skillfulRead = []; //巧思阅读
      vm.sparklingDiscourse = []; //妙语连珠
      vm.goodMemory = data.wordsAuth.split(",");
      vm.sudokuPass = data.readingAuth.split(",");
      vm.skillfulRead = data.extraReadingAuth.split(",");
      vm.sparklingDiscourse = data.exerciseAuth.split(",");
      // debugger;
      vm.currentTag = data;
    },
    addTag() {
      var rules = [];
      let authBeginTime = this.$refs.authBeginTime;
      let authEndTime = this.$refs.authEndTime;
      let hardwareId = this.$refs.hardwareId;
      if (vm.isEmpower) {
        rules.push({
          judge: vm.currentTag.authBeginTime,
          focus: authBeginTime,
          tips: "请选择授权开始时间"
        });
        rules.push({
          judge: vm.currentTag.authEndTime,
          focus: authEndTime,
          tips: "请选择授权结束时间"
        });
        rules.push({
          judge: vm.currentTag.hardwareId,
          focus: hardwareId,
          tips: "请输入硬件ID"
        });
        rules.push({
          judge:
            vm.currentTag.hardwareId.length == 16 &&
            tool.judge("checkValue", vm.currentTag.hardwareId),
          focus: hardwareId,
          tips: "请输入16位由数字、字母组成的硬件ID"
        });
        vm.currentTag.wordsAuth = "";
        vm.currentTag.readingAuth = "";
        vm.currentTag.extraReadingAuth = "";
        vm.currentTag.exerciseAuth = "";
        for (let i = 0; i < vm.goodMemory.length; i++) {
          vm.currentTag.wordsAuth +=
            vm.currentTag.wordsAuth == ""
              ? vm.goodMemory[i]
              : "," + vm.goodMemory[i];
        }
        for (let i = 0; i < vm.sudokuPass.length; i++) {
          vm.currentTag.readingAuth +=
            vm.currentTag.readingAuth == ""
              ? vm.sudokuPass[i]
              : "," + vm.sudokuPass[i];
        }
        for (let i = 0; i < vm.skillfulRead.length; i++) {
          vm.currentTag.extraReadingAuth +=
            vm.currentTag.extraReadingAuth == ""
              ? vm.skillfulRead[i]
              : "," + vm.skillfulRead[i];
        }
        for (let i = 0; i < vm.sparklingDiscourse.length; i++) {
          vm.currentTag.exerciseAuth +=
            vm.currentTag.exerciseAuth == ""
              ? vm.sparklingDiscourse[i]
              : "," + vm.sparklingDiscourse[i];
        }

        rules.push({
          judge:
            vm.currentTag.wordsAuth &&
            vm.currentTag.readingAuth &&
            vm.currentTag.extraReadingAuth &&
            vm.currentTag.exerciseAuth,
          focus: null,
          tips: "请选择授权项目"
        });
        if (!tool.validate(rules)) {
          return false;
        }
        vm.currentTag.isStatus = "1";
      } else {
        vm.currentTag.authBeginTime = "";
        vm.currentTag.authEndTime = "";
        vm.currentTag.hardwareId = "";
        vm.currentTag.wordsAuth = "";
        vm.currentTag.readingAuth = "";
        vm.currentTag.extraReadingAuth = "";
        vm.currentTag.exerciseAuth = "";
        vm.currentTag.isStatus = "0";
      }
      return true;
    },
    valiList(data) {
      for (let i = 0; i < data.length; i++) {
        console.log(data[i]);
        if (data[i].isStatus == "0") continue;
        if (data[i].authBeginTime == "" || data[i].authEndTime == "") {
          this.$message.warning("请选择" + data[i].hardwareName + "的授权时间");
          return false;
        }
        if (
          vm.currentTag.hardwareId.length != 16 &&
          !tool.judge("checkValue", vm.currentTag.hardwareId)
        ) {
          this.$message.warning(
            "请输入正确的" + data[i].hardwareName + "的硬件ID"
          );
          return false;
        }
        if (
          data[i].wordsAuth == "" &&
          data[i].readingAuth == "" &&
          data[i].extraReadingAuth == "" &&
          data[i].exerciseAuth == ""
        ) {
          this.$message.warning("请选择" + data[i].hardwareName + "的授权项目");
          return false;
        }
      }
      return true;
    },
    sure: function() {
      if (!vm.addTag()) return;
      if (vm.isAdd) {
        api.efficientreadauthinfoAdd(vm.empowerDataList).then(function(data) {
          console.log(data);
          if (data.resultCode == 2000) {
            vm.$message({
              message: "授权成功",
              type: "success"
            });
            vm.$emit("callback", "授权成功");
            vm.cancel();
          } else {
            vm.$message.error(data.message);
            vm.cancel();
          }
        });
      } else {
        api
          .efficientreadauthinfoUpdate(vm.empowerDataList)
          .then(function(data) {
            console.log(data);
            if (data.resultCode == 2000) {
              vm.$message({
                message: "授权成功",
                type: "success"
              });
              vm.$emit("callback", "授权成功");
              vm.cancel();
            } else {
              vm.$message.error(data.message);
              vm.cancel();
            }
          });
      }
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
        vm.isDisable = false;
        vm.goodMemory = []; //佳词妙记
        vm.sudokuPass = []; //数独冲关
        vm.skillfulRead = []; //巧思阅读
        vm.sparklingDiscourse = []; //妙语连珠
        vm.nameIndex = 1;
        vm.empowerDataList = [
          {
            isCheck: true,
            authBeginTime: "",
            authEndTime: "",
            hardwareId: "",
            sysUserId: "",
            wordsAuth: "",
            readingAuth: "",
            extraReadingAuth: "",
            exerciseAuth: "",
            isStatus: ""
          }
        ];
      }, 500);
    }
  },
  created: function() {
    vm = this;
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
  }
};
</script>
<style lang="scss">
.newempower {
  .button-new-tag {
    margin-left: 10px;
    height: 34px;
    line-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .el-tag {
    height: 0.34rem;
    line-height: 0.32rem;
    font-size: 0.16rem;
    cursor: pointer;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }

  .el-form-item {
    margin-bottom: 0.1rem;
  }
  .el-checkbox__label {
    font-size: 0.16rem;
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  width: 8rem;
}
</style>

